<template>
  <div class="recommend">
    <div class="recommend-header">热销推荐</div>
    <router-link :to="'/detail?id='+item.id" v-for="item in recommendList" :key="item.id" tag="div">
      <div class="item border-bottom">
        <div class="item-img-wrapper">
          <img :src="item.imgUrl" alt class="item-img" />
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-content">
            <span
              class="iconfont icon-star"
              v-for="(star,index) in item.stars"
              :key="index"
            >&#xe683;</span>
            <i>{{item.commentNum}}条评论</i>
          </p>
          <p class="item-price">
            <span>￥{{item.price}}</span>
            起
          </p>
        </div>
      </div>
    </router-link>
    <div class="recommend-bottom">
      <a href>查看全部产品</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeRecommend",
  data() {
    return {};
  },
  props: {
    recommendList: Array
  }
};
</script>

<style lang="stylus" scoped>
.recommend
  width: 100%
  .recommend-header
    width: 100%
    height: 0.94rem
    font-size: 0.32rem
    line-height: 0.94rem
    padding-left: 0.2rem
    background: #f5f5f5
  .item
    width: 100%
    display: flex
    flex-wrap: nowrap
    border-color: #f3f3f3
    .item-img-wrapper
      padding: 0.2rem
      .item-img
        display: block
        width: 2rem
    .item-info
      padding: 0.4rem 0
      .item-title
        font-size: 0.32rem
      .item-content
        font-size: 0.24rem
        .icon-star
          margin: 0 -0.04rem
          color: orange
        i
          font-style: normal
          padding-left: 0.2rem
      .item-price
        font-size: 0.24rem
        span
          font-size: 0.4rem
          color: orange
  .recommend-bottom
    font-size: 0.32rem
    height: 0.8rem
    line-height: 0.8rem
    text-align: center
</style>